<template>
  <el-card class="app-container">
    <div>
      <div class="itemTitle">AI在线分析</div>
      <div class="search">
        <el-form :inline="true" :model="queryParams" ref="queryForm">
          <el-col :span="5">
            <el-form-item label="车间" prop="workshopId">
              <el-select
                filterable
                v-model="queryParams.workshopId"
                placeholder="请选择车间"
                clearable
              >
                <el-option
                  v-for="(dict, index) in listShop"
                  :key="index"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="工房" prop="roomId">
              <el-select
                filterable
                v-model="queryParams.roomId"
                placeholder="请选择工房"
                clearable
              >
                <el-option
                  v-for="(dict, index) in listRoom"
                  :key="index"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="摄像头名称" prop="monitorName">
              <el-input
              @keyup.enter.native="handleQuery"
                v-model="queryParams.monitorName"
                placeholder="请输入摄像头名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div class="content">
        <div class="ct-btns">
          <el-button
            type="primary"
            @click="handleData"
            >配置AI推送接口</el-button
          >
        </div>
        <div class="ct-table">
          <elTables
            :table-data="tableData"
            :columns="tableColumns"
            :totalLength="total"
            :currentPage="queryParams.pageNum"
            :handle-current-change="handleCurrentChange"
            isPagin
            :curHeight="tableHeight"
          />
        </div>
      </div>
    </div>
    <!-- 添加或修改AI分析报警信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      append-to-body
      class="dialog-form"
    >
      <el-image :src="url" :preview-src-list="[url]">></el-image>
    </el-dialog>
    <el-dialog
      title="配置AI推送接口"
      :visible.sync="urlDialogVisible"
      append-to-body
      class="dialog-form"
    >
      <div style="margin:20px">
        <el-input v-model="url" placeholder="url地址" style="width:500px"></el-input>
        <div style="padding-top:20px;text-align: center;">
          <el-button @click="handleSubmit" type="primary">提交</el-button>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
const defaultQueryParams = {
  pageNum: 1,
  pageSize: 10,
};
import { getToken } from "@/utils/auth";
import { pageAlarm,pubsub } from "@/api/video/alarm";
import { listRoom, listShop } from "@/api/video/monitor";
export default {
  name: "Alarm",
  data() {
    return {
      tableHeight: 0,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "报警图片",
      // 是否显示弹出层
      open: false,
      url: "",
      tableData: [],
      listRoom: [], //工房
      listShop: [], //车间
      // 查询参数
      queryParams: {
        ...defaultQueryParams,
        monitorName: null,
        roomId: null,
        workshopId: null,
        factoryId: null,
      },
      tableColumns: [
        { key: "areaId", title: "区域ID" },
        { key: "monitorName", title: "摄像头名称" },
        { key: "workshopId", title: "车间" },
        { key: "roomId", title: "工房" },
        { key: "alarmConditionName", title: "报警类型" },
        { key: "alarmUrl", title: "报警时间" },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  directives: [
                    {
                      name: "hasPermi",
                      value: ["video:alarm:info"],
                    },
                  ],
                  on: {
                    click: () => {
                      this.handleLook(params.row);
                    },
                  },
                },
                "查看"
              ),
            ]);
          },
        },
      ],
      urlDialogVisible:false,
      url:'',
    };
  },
  created() {
    this.getPage();
    this.getlistShop();
    this.getlistRoom();
  },
  mounted() {
    this.$nextTick(() => {
      this.getTableHeight();
    });
  },
  watch: {
    "queryParams.workshopId": {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal, "车间发生变化");
        if (newVal !== oldVal) {
          // 获取工房
          this.getlistRoom(newVal);
        }
      },
      deep: true,
    },
  },
  methods: {
    handleData(){
      this.urlDialogVisible=true;
    },
    handleSubmit(){
      console.log('url',this.url);
      pubsub({url:this.url}).then(res => {
        console.log('res',res);
        if(res.code == 200){
          this.urlDialogVisible=false;
        }
      })
    },
    //获取工房
    getlistRoom(val) {
      let q = { workShopId: val };
      listRoom(q).then((res) => {
        this.listRoom = res.data;
      });
    },
    //获取车间
    getlistShop() {
      listShop().then((res) => {
        this.listShop = res.data;
      });
    },
    /** 查看按钮操作 */
    handleLook(row) {
      this.getImage(row.alarmUrl);
    },
    getImage(val) {
      this.url = process.env.VUE_APP_PREVIEW_API + val;
      this.open = true;
      // axios({
      //   method: "get",
      //   url: url,
      //   responseType: "arraybuffer",
      // }).then((res) => {
      //   const bufferUrl = btoa(
      //     new Uint8Array(res.data).reduce(
      //       (data, byte) => data + String.fromCharCode(byte),
      //       ""
      //     )
      //   );
      //   this.url = "data:image/png;base64," + bufferUrl;
      //   this.open = true;
      // });
    },
    getTableHeight() {
      let height = document.getElementsByClassName("ct-table")[0].clientHeight;
      this.tableHeight = height - 40;
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getPage();
    },
    /** 查询AI分析报警信息列表 */
    getPage() {
      this.loading = true;
      pageAlarm(this.queryParams).then((response) => {
        this.tableData = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getPage();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
